<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h2>省列表</h2>
<br>
<a href="${request.contextPath}/province/openAddPage">添加省份</a>
<form method="get" action="${request.contextPath}/province/list">
    <select name="key" id="queryKey">
        <option value="id">编号</option>
        <option value="name">省名</option>
        <option value="area">大区</option>
        <option value="status">状态</option>
    </select>
    <input type="text" name="value" id="queryValue">
    <select id="areaSelect" style="display: none">
        <option value="华北">华北</option>
        <option value="华东">华东</option>
        <option value="华南">华南</option>
        <option value="西北">西北</option>
        <option value="西南">西南</option>
        <option value="港奥台">港奥台</option>
    </select>
    <select id="statusSelect" style="display: none">
        <option value="1">可用</option>
        <option value="2">禁用</option>
    </select>
    <input type="submit" value="查询">
</form>
<br>
<hr>
<table style="width: 80%;text-align: center;">
    <tr>
        <th>编号</th>
        <th>省份</th>
        <th>大区</th>
        <th>状态</th>
        <th>操作</th>
    </tr>
    <#assign i=0>
    <#list pageBean.records as province>
        <#assign i=i+1>
        <tr>
            <td>
                <a href="${request.contextPath}/province/getById?provinceId=${province.id}">${i}</a>
            </td>
            <td>${province.name}</td>
            <td>${province.area}</td>
            <td>
                <#if province.status==1>可用</#if>
                <#if province.status==2>禁用</#if>
            </td>
            <td>
                <a href="${request.contextPath}/province/openUpdatePage?provinceId=${province.id}">修改</a>
            </td>
        </tr>
    </#list>
    <tr>
        <td colspan="4">
            <#include "common/page.ftl" encoding="utf-8">
        </td>
    </tr>
</table>

<script src="${request.contextPath}/assets/js/jquery3.6.0.js"></script>
<script>
    $("#queryKey").change(function () {
        let val = $("#queryKey option:selected").val();
        if ('area' == val) {
            $("#queryValue").hide();
            $("#queryValue").removeAttr("name");

            $("#statusSelect").hide();
            $("#areaSelect").attr("name","value");
            $("#areaSelect").show();
        } else if ('status' == val) {
            $("#queryValue").hide();
            $("#queryValue").removeAttr("name");

            $("#areaSelect").hide();
            $("#statusSelect").attr("name","value");
            $("#statusSelect").show();
        }
    })
</script>
</body>
</html>
